<template>
    <div class="exam-detail-page">
        <div class="nav">
            <van-nav-bar fixed title="试题详情" left-text="返回" right-text="" left-arrow @click-left="$router.go(-1)"/>
        </div>
        <div class="problem-list">
            <test-problem class="question" ref="child"
                v-for="(item,index) in questionList" :key="index" :sort="index"
                :index="index + 1" 
                :problem="item">
            </test-problem>
        </div>
        <div class="slider" v-show="isShowSlider">
            <div class="small" @click="scrollToQuestionByIndex(index)"
             v-for="(item,index) in smallAnswer" :key="index">
                <span>{{index + 1}}</span>
                <span :sort="index">{{item}}</span>
            </div>
        </div>
        <div class="roundSlider" v-tap="e => showSlider(!isShowSlider)">
            <span>&gt;&gt;</span>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Toast } from 'vant';
import axios from 'axios'
import transfer from '../../utils/index'
import vueTouch from 'kim-vue-touch'
import testProblem from '../../components/TestProblem'


Vue.use(NavBar);
Vue.use(Toast);
Vue.use(vueTouch);

export default {

    components:{
        testProblem
    },
    beforeMount(){
        this.$store.state.isShow = false
        this.getExamDetail()
    },
    data() {
        return {
            questionList: [],
            smallAnswer:[],
            isShowSlider:false
        }
    },
    methods: {
        // 获取试题详情
        getExamDetail: function(){
            // 获取要查看的试题详情的索引
            let username = this.$route.query.username
            let num = this.$route.params.num
            Toast.loading({
                message: `加载第${num}次试题信息中...`,
                forbidClick: true,
                duration: 0
              });
            axios.post('/api/exam/examdetail',`num=${num}&username=${username}`).then(res => {
                if(res.data.code == 700){
                    // 获取成功
                    let dataList = res.data.data
                    let promList = dataList.map( data => data.problem)
                    let answerList = promList.map(prom => prom.answer)
                    // 将正确答案替换成用户所选的答案,并将正确答案存放至数组中
                    promList.forEach((prom,index) => {
                        prom.answer = dataList[index].ownOption
                        this.smallAnswer.push(prom.answer)
                    })
                    // 进行题目渲染
                    this.questionList = promList
                    // 渲染完成后开始检测题目是否正确
                    setTimeout(()=>{
                        this.$refs.child.forEach((testProblem,index) => {
                            if(testProblem.verifyAnswer(answerList[index]) == false){
                                document.querySelector(`.small span[sort="${index}"]`).style.backgroundColor = "red"
                            }
                        })
                        Toast.clear()
                    },200)
                
                } else {
                    Toast.clear()
                    Toast(res.data.message)
                    // 获取失败
                    if(res.data.code == 401){
                        localStorage.clear()
                        this.$router.push({path: '/login'})
                    } else {
                        this.$router.push({path: '/home'})
                    }
                }
            })  
        },
        // 是否显示侧边栏
        showSlider(value){
            this.isShowSlider = value
            if(value){
                document.querySelector('.roundSlider').style.left='80px'
                document.querySelector('.roundSlider span').innerHTML='&lt;&lt;'
            } else {
                document.querySelector('.roundSlider').style.left='0px'
                document.querySelector('.roundSlider span').innerHTML='&gt;&gt;'
            }
        },
        // 窗口滑动到指定的题目位置
        scrollToQuestionByIndex(index){
            let top = document.querySelector(`.question[sort='${index}']`).offsetTop
            window.scrollTo(0,top)
        }
    }
}
</script>

<style lang="less" scoped>
 .nav{
     background: white;
     width: 100%;
     height: 47px;
     z-index: 9;
     border-bottom: 1px solid #ccc;
     position: fixed;
     top: 0px;
     left: 0px;
}    

.problem-list{
    margin-top: 50px;
    .question{
        margin-top: 20px;
    }
}

.slider{
    position: fixed;
    left: 0;
    top: 50%;
    margin-top: -200px;
    height: 400px;
    width: 80px;
    background-color: black;
    opacity: 0.5;
    overflow:auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    .small {
        width: 90%;
        height: 40px;
        line-height: 40px;
        margin: 5px;
        text-align: center;
        display: block;
        
        span{
            display: block;
            width: 50%;
            height: 40px;
            line-height: 40px;
            color: white;
        }
        :nth-child(1){
            background-color: teal;
        }
        :nth-child(2){
            background-color: green;
            margin-left: 50%;
            margin-top: -40px;
        }
    }
}
.roundSlider{
  position: fixed;
  left: 0;
  top: 50%;
  width: 28px;
  height: 50px;
  opacity: 0.5;
  margin-top: -20px;
  background-color: black;
  border-radius: 0 50% 50% 0;
  text-align: center;
  z-index: 5;
  span {
    font-size: 20px;
    color: #ccc;
    display: block;
    line-height: 50px;
  }
}
</style>